<script setup lang="ts">
import CheckedIcon from "@/assets/svg/devices/check.svg?component";
import { ref } from "vue";

defineOptions({
  name: "DeviceAddGuidConfirm"
});

const isUSBChecked = ref(false);
const isUSBError = ref("找不到您的测试面板，请检查连接。");

const infoChecked = ref(false);

const addFinish = ref(false);
const addSuccess = ref();

const addErr = ref();
</script>

<template>
  <div>
    <div style="height: 220px" class="flex justify-center items-center flex-col gap-11">
      <el-form>
        <!--USB-->
        <el-form-item>
          <div class="flex justify-start align-top">
            <CheckedIcon v-if="isUSBChecked" />
          </div>

          <div>
            <span style="color: #2d3748; margin-left: 20px">1、使用USB电缆将测试面板连接到计算机。</span>
            <br />
            <span v-if="isUSBChecked" style="color: #b0bbcd; margin-left: 40px">您已成功连接到测试面板</span>
            <div v-else style="margin-left: 20px">
              <el-button
                link
                text
                type="primary"
                style="
                  color: #2162ea;

                  font-style: normal;
                  font-weight: 400;
                  line-height: 28px;
                  text-decoration-line: underline;
                  text-decoration-style: solid;
                  text-decoration-skip-ink: auto;
                  text-decoration-thickness: auto;
                  text-underline-offset: auto;
                  text-underline-position: from-font;
                "
                >去检索
              </el-button>
            </div>
          </div>
        </el-form-item>
        <!--Info-->
        <el-form-item>
          <CheckedIcon v-if="infoChecked" />
          <div>
            <span style="margin-left: 20px">2、在测试面板上连接Wi-Fi，位于计算机的同一Wi-Fi下。</span>
            <br />
            <div v-if="infoChecked" style="margin-left: 40px">
              <span style="color: #b0bbcd">
                您已成功将测试面板连接到Wi-Fi<br />
                IMEI:1202C68827bf<br />
                IP地址：192.168.1.170</span
              >
            </div>
            <div v-else style="margin-left: 20px">
              <el-button link text type="primary">
                <el-link :underline="false" style="color: #2162ea; font-style: normal; font-weight: 400; line-height: 28px; text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: auto; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font"> 去检索 </el-link>
              </el-button>
            </div>
          </div>
        </el-form-item>
        <!--msg-->
        <el-form-item v-if="addFinish">
          <div style="margin-left: 60px">
            <span v-if="addSuccess" style="color: #149514">{{ addSuccess }}</span>
            <span v-else-if="addErr" style="color: red">{{ addErr }}</span>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="flex justify-center">
      <el-button v-if="addFinish" size="large" style="display: flex; width: 160px; height: 53px; padding: 13px; justify-content: center; align-items: center; gap: 13px; flex-shrink: 0; border-radius: 5px"> 添加其他设备 </el-button>
      <el-button size="large" type="primary" style="display: flex; width: 160px; height: 53px; padding: 13px; justify-content: center; align-items: center; gap: 13px; flex-shrink: 0; border-radius: 5px" @click="$emit('finish')">确认 </el-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
::v-deep(.el-card__header),
::v-deep(.el-card__footer) {
  border-bottom: none; /* 取消标题横杠 */
  border-top: none; /* 取消底部横杠 */
}
</style>
